feat(native): interop react-native-gesture-handler's Pressable and button family - #416

Problem

react-native-gesture-handler's Pressable and button family render GestureHandlerButton, a codegen'd native component. The react-native import rewrite never reaches them, so className falls through their prop spread onto a view that declares no such prop — it reaches no pixel, and nothing warns. Measured on device: a gesture-handler Pressable carrying flex flex-row items-center gap-2 rounded-md px-3 py-2 rendered 22×114 px against a plain View control's 132×101, stacked vertically because flex-row never applied.

The type side has the same hole on the buttons. RawButtonProps extends NativeViewGestureHandlerProps and AccessibilityProps, never ViewProps, so BaseButtonProps, RectButtonProps and BorderlessButtonProps never inherit the className this library adds. (RNGH's own Pressable does reach it — its props are Omit<ViewProps, 'children' | 'style' | 'hitSlop'>, which keeps className.)

Fix

A styled react-native-gesture-handler entry, resolved the way the existing react-native-safe-area-context one is, mapping className onto the style each component already forwards. Plus a RawButtonProps augmentation in types.d.ts for the button family.

Re-declared: Pressable, RawButton, BaseButton, RectButton, BorderlessButton, PureNativeButton, DrawerLayoutAndroid and GestureHandlerRootView. The suite does not restate that list — it derives it, by diffing the wrapper's exports against the real package's by identity, and every generated case reads the derived set.

Which components are not re-declared, and why, is the part worth reviewing. Every line of it is a test rather than a comment:

• ScrollView, Switch, TextInput, FlatList, Text — createNativeWrapper forwards unclaimed props to a react-native primitive, and Text renders one directly, so the react-native rewrite already reaches these. Wrapping them would style the gesture handler rather than the view.
• The four touchables, DrawerLayout, Swipeable — className is dropped on all six. Gesture Handler marks every one @deprecated in favour of Pressable and the Reanimated twins, and this repo lints @typescript-eslint/no-deprecated at error, so wrapping them would need a suppression in your own source for a surface scheduled for deletion.
• RefreshControl — className is dropped. React Native's jest mock renders <RCTRefreshControl /> with no props at all, so no test at this tier could observe a fix, and style on a RefreshControl drives nothing on either platform.
• ReanimatedDrawerLayout, ReanimatedSwipeable — out of scope, not out of reach. See below; this is the one exclusion I would most like a decision on.

Three things the exclusion register got wrong, and what stops each recurring

GestureHandlerRootView is a shipped leak on Android. It sat in the register's notAComponent bucket — which the generated invariants subtract — so nothing rendered it. It has two implementations and the rewrite reaches only one. The default renders <View style={style ?? styles.container} {...rest} />, so a styled twin lands underneath it and the class resolves. The Android one renders specs/RNGestureHandlerRootViewNativeComponent, with no react-native specifier anywhere in the file for the rewrite to match:

ANDROID/REWRITE  {"type":"RNGestureHandlerRootView","props":{"style":{"flex":1},"className":"w-80"}}

That is the PureNativeButton shape — the raw class string on a codegen'd native view — on the export every app mounts at its root, on the platform where mounting it is mandatory. It type-checks today through ViewProps, so nothing stops a user writing it.

A bare className: "style" mapping fixes Android and regresses the default, and the semantics are narrow enough to be worth stating exactly. Gesture Handler reaches its { flex: 1 } through style ?? styles.container over a module-private StyleSheet. flex: 1 disappearing when the user passes a style is that ??, working as documented — not a regression, and not something an interop wrapper should improve on. The regression is the case the ?? was never written for: a resolved className supplying a style where the user gave none. Measured, the class-only render went [{width:95},{flex:1}] to [{width:95}] — every root view carrying a class silently un-flexed, collapsing the app to its content's height.

So the wrapper carries the default itself and applies it on the same condition Gesture Handler applies it. Verified after the fix, on the default variant and the Android one alike:

Jest's defaultPlatform is ios, so no suite can reach the Android variant by resolution. Substituting its module for the one the index requires puts the shipped wrapper over the shipped Android component; the new suite renders both variants and pins the byte-identical no-className path on each.

PureNativeButton is a member of the button family absent from the mappings by omission — the same codegen'd RNGestureHandlerButton, exported directly. Unwrapped it renders {"type":"RNGestureHandlerButton","props":{"className":"pnb"}}: the raw class string on a native view, which is worse than dropping it.

Two exclusions did not do what they claimed. TouchableNativeFeedback was excluded on the grounds that it "re-exports React Native's, which the rewrite already reaches". The rewrite does reach the specifier — and components/index.cts hands back require("react-native").TouchableNativeFeedback untouched, with no styled twin, so the class is dropped on every platform rather than only on Android. DrawerLayoutAndroid was excluded as re-exported straight from react-native; gesture-handler wraps it in createNativeWrapper instead, so the styled twin that exclusion assumed does not exist in either direction, and the class was simply dropped. It is now re-declared.

All three are structural rather than clerical, so the guards are too:

• The census is derived from the module. A member counts as re-declared iff its export is no longer the one export * provided, and the excluded set is every remaining export that renders. The two are computed, not listed, so a component landing upstream joins the generated cases on the commit that introduces it.
• Every excluded member is held to a drop, not a leak. Removing the PureNativeButton re-declaration now fails on className surviving onto the rendered element, which is the defect itself — not on a name being absent from a list.
• An accounting test still requires every export to name its reason, so a member can be neither re-declared nor excluded only by turning the suite red.
• TouchableNativeFeedback and DrawerLayoutAndroid are shown resolving to react-native's own object under a real rewrite, beside View, Text, ScrollView, TouchableOpacity and TouchableHighlight, which resolve to a styled twin. "The rewrite reaches it" and "the class survives" are separated by object identity rather than by prose.

The Reanimated exclusion is a scoping choice, and I would like a decision on it

The outcome stands: ReanimatedDrawerLayout and ReanimatedSwipeable are not covered here. The reason I gave for it was wrong, so it is worth restating.

"Out of reach entirely" reads as an external constraint. It is not one. Both do ship as their own entry points and neither is named from the index — grep -c Reanimated on RNGH's index.d.ts is 0 — so nativeResolver's moduleName === "react-native-gesture-handler" cannot match them. But that exactness is a scoping choice made in a function this PR already edits, one startsWith away, and that function already carries a non-exact branch for react-native's own Libraries.

What actually blocks them is an API question. Neither exposes a plain style: ReanimatedDrawerLayout takes contentContainerStyle / drawerContainerStyle, ReanimatedSwipeable takes containerStyle / childrenContainerStyle. Covering them means minting four *ClassName props on the contentContainerClassName pattern, for targets nothing else in this package names — a public API decision, and yours rather than mine.

Two things make it worth taking now rather than later:

• The deprecated bucket is excluded on the grounds that Gesture Handler sends users to Pressable and to the Reanimated twins — and the twins are the uncovered set. The stated migration target of the six deprecated components is itself unstyled.
• DrawerLayout and ReanimatedDrawerLayout have identical style-prop surfaces (contentContainerStyle / drawerContainerStyle), as do Swipeable and ReanimatedSwipeable (containerStyle / childrenContainerStyle). So the deprecated pair and their replacements need one decision between them, not two. Whatever className targets on Swipeable, it targets the same thing on ReanimatedSwipeable.

And a limit on the derivation that is worth knowing before reading it as a guarantee: its domain is Object.keys over the index module. Those two are outside it permanently — no upstream change can enrol them, because nothing upstream would name them from the index. Covering them is an edit to the wrapper, not a thing the census notices. That is the boundary on "a component joins the generated cases on its own commit".

The no-className guard was blind to every handler, and two of the three obvious remedies still are

This is the part I would most like read closely, because the fix is not the one that looks right.

The per-component invariant that a wrapper renders identically when given no className compares JSON.stringify of two trees — and JSON.stringify drops exactly the props whose value is a function. These nodes carry up to four. Mutating the styled Pressable wrapper to const { onPress, ...rest } = props and forward the rest reddened nothing: 3 failed, 1170 passed, byte-for-byte the control run.

Measured against that same mutation:

Why fireEvent.press cannot be the closer is worth spelling out, because it is the intuitive answer and it fails silently. findEventHandler (@testing-library/react-native/build/fire-event.js) recurses on element.parent until any element on the path carries a prop matching the event — and the JSX element the test itself wrote is on that path. So a component that drops onPress on the floor still answers a press with the caller's own callback. I proved that with a deliberately-swallowing local component: the press fires, the count is 1, and the component under test never saw the handler.

The closer is a function-valued prop-name comparison against the unwrapped twin — the exact complement of what the byte comparison drops, so the two together see the whole prop set and neither alone does. It is mutation-proven and it generalises: a second mutation on RectButton reddens its own generated case rather than needing a hand-written one. Stripping the typeof value === "function" filter reddens 2 tests, so the discriminator is load-bearing rather than incidental.

A permanent test pins that a press answers from the caller, so the closer that looks obvious is not written again — and it goes red if RNTL ever stops climbing past composites.

One member is a new exclusion under that guard: DrawerLayoutAndroid. React Native's jest mock renders a debug placeholder View (borderColor: 'red', borderWidth: 1) forwarding no props at all — not testID, not a callback — so its generated case is an equality between two empty sets and would pass over any wrapper whatsoever. It is named in handlerUnobservable and pinned by a test asserting the emptiness, so the case reads as the tier limit it is rather than as a measurement it is not. Same footing as the existing RefreshControl exclusion, and if the mock ever forwards props the pin turns red and the exclusion is retaken.

A cost worth disclosing

Moving GestureHandlerRootView into the styled census puts a fabric seam into every suite that renders the census. Rendering the root view calls maybeInitializeFabric(), which reaches RNGestureHandlerModule.install() — a method the JS module carries only inside a native binary — and React Native's own jest/setup.js defines nativeFabricUIManager as {}, so isFabric() returns true and the branch is taken. Clearing that global takes the branch that never touches the module.

It is shared as disableFabric() in the test helper rather than copied into the four suites that need it.

A core defect this also fixes: a callback style prop stopped being a callback

deepMergeConfig in src/native/styles/index.ts merged a style value as data. A function fails both object tests, so it fell into the array branch and produced style: [computed, theCallbackItself] — an array containing the un-invoked function. Pressable picks its branch with typeof style === "function"; wrapped in an array the answer is "object", so the callback never ran and the raw function reached the native view. Every pressed-state style silently gone, no warning.

Measured on <Pressable className="text-red" style={({pressed}) => …} />: [{color:"#f00"}, [Function style]] before, [{color:"#f00"}, {opacity:1}] after.

No gesture-handler code is on that path. src/components/Pressable.tsx carries the identical { className: "style" } mapping and is the twin the react-native rewrite installs across the whole graph, so every <Pressable className=… style={({pressed}) => …}> in any app was affected, as was any user styled() mapping whose target prop holds a callback. Its regression tests import react-native-css/components/Pressable and no gesture-handler at all. Happy to split it into its own PR if you would rather — say the word and I will.

style merges at four sites inside deepMergeConfig and the guard is on all four. Two notes from measuring them:

• The string-target branch never enters the array handling, so nothing the ["style"] cases assert reaches it. It has its own test; reverting that one guard reddens it alone.
• The inline ["style"] guard executes but its result is discarded: the length-1 array block a few lines down recomputes the same key from the same operands. Reverting it reddens nothing, and no test can make it. I left it as the symmetric form — say if you would rather it went.

Tests

Both fixes are tested on both planes.

Compiler plane. src/__tests__/compiler/react-native-gesture-handler.test.tsx says what that plane carries for the interop, which is nothing — and measures it rather than asserting it. One declaration is asserted byte-for-byte, then driven into a react-native primitive and into every re-declared gesture-handler member, with each unwrapped twin beside it leaving the same bytes unresolved. Pointing RectButton's mapping at a prop that is not style reddens the render halves and leaves the compile assertions green; that insensitivity is the proof the fix does not belong on this plane. It also contrasts the emitted declaration against @nativeMapping's, so a reader looking for a compiler feature behind the interop can see there is none.

src/__tests__/compiler/important.test.tsx is the second fix's compiler half, and !important had no compiler coverage in the repo at all. The marker lands in the rule's specificity array at Specificity.Important — read through the exported census rather than the literal index — and it is what selects which of deepMergeConfig's two passes a class takes, visible as the operand order inverting between them. A callback has to survive whichever pass the marker selects, so the two are asserted together.

Native plane. Per re-declared component: the fix (className resolves into the rendered style), the invariant (className never reaches a rendered element as a prop), the trigger (the unwrapped component drops it, so the bug is pinned and cannot silently stop being a bug), coexistence with an inline style, byte-identical output when no className is given, and the same function-valued prop names as the unwrapped twin. The last two are complements and are what make the pair whole; the byte comparison exists because the resolver routes every gesture-handler import in the graph through this wrapper, react-navigation and react-native-screens included. Each registers a width no other test uses.

react-native-gesture-handler-root-view.test.tsx is the Android variant, reached by module substitution rather than by resolution. react-native-gesture-handler-rewrite.test.tsx renders the five rewrite-dependent members under a real react-native → react-native-css/components mock; its sibling shows the same five leaking the raw class string without that mock, which is what makes the rewrite load-bearing rather than a comment.

Every generated census carries a non-empty assertion, so a narrowed export surface cannot quietly produce zero cases.

Gates

Measured at the head of this branch, on Windows:

Three consecutive runs agreed exactly. Against the previous head that is +1 suite and +26 tests, with no runtime-error suites and no suite carrying zero assertions.

The 3 failures are Windows-only and pre-existing — react-native › plugin › 7, react-native-web › plugin › 6 and react-native-web › plugin › 17, path-rewrite cases expecting require("react-native-css/components/View") and getting require("../View"). They are red on pristine main on this machine and are the exact shape #390 addresses. Your CI is green on them, so please read "3 pre-existing failures" as machine-local rather than as a claim about the repo.

Read that 3 as the warm-cache floor rather than an invariant constant. On a loaded machine this suite also produces a tail of first-in-file 5000 ms timeouts that vanish on re-run, and a cold cache can drop a whole suite — which subtracts its count with zero failures to show for it. Run twice before reading any total on Windows.

react-native-gesture-handler@2.28.0 is added as an exact-pinned devDependency — the version Expo SDK 54 bundles, mirroring how react-native-safe-area-context: 5.6.1 is pinned against that SDK's ~5.6.0.

Open questions

1. The merge-engine fix arguably belongs in its own PR. See above; splitting is a one-command job if you prefer it.
2. The Reanimated twins need a *ClassName decision, and it is the same decision DrawerLayout and Swipeable need. Four props, one API question, covering both the deprecated pair and the components users are told to migrate to. See the section above — this is the one I would most like an answer on, because the exclusion is a scoping choice I made rather than a constraint I hit.
3. src/metro/resolver.ts changes resolution beyond gesture-handler, twice. The new branch rewrites every exact react-native-gesture-handler import in the graph — defended by the byte-identical-output test, and narrow enough that subpath imports are untouched. Separately, the own-package exemption is rewritten from a fixed ../../../ depth to a layout-anchored package root: under the react-native export condition __dirname is <pkg>/src/metro, and the old derivation resolved to node_modules/src, so the exemption missed and this package's own modules were fed back through the wrappers that import them. That is a real fix on a path shared by the react-native, safe-area and react-native/Libraries/* rewrites.
4. The touchables, DrawerLayout and Swipeable are excluded as @deprecated. If you would rather they were styled, the mapping is the same { className: "style" } and the exclusion is one register entry to move — subject to question 2.
5. Augmenting an optional peer in types.d.ts. react-native-gesture-handler is a devDependency here, not a peer, and there is no peerDependenciesMeta block — mirroring how react-native-safe-area-context is carried. So the resolver unconditionally rewrites a package that is neither declared nor optional, and types.d.ts augments a module a consumer may not have installed. Measured not to break such a consumer (a declare module naming an absent package compiles clean under skipLibCheck: false), but it is a new pattern and you may prefer an opt-in ./types/* entry.
6. src/__tests__/metro/ is a new test directory for a module that had none, and src/__tests__/_gesture-handler.ts is a shared helper on the _-prefix convention vendor/tailwind/_tailwind.tsx already uses.

Interaction with #418. This PR adds a react-native-gesture-handler module augmentation to types.d.ts; #418 rewrites that same file to declare every prop | undefined for exactOptionalPropertyTypes. The two overlap textually and whichever lands second will need a trivial rebase. The new RawButtonProps block here already declares both of its props | undefined, so it is consistent with #418's rule either way — but if #416 lands first, #418's sweep should be re-run so the file has no exception, and if #418 lands first, nothing here changes.